<template>
  <div class="tab-router-container">
    <el-card shadow="hover" class="rounded-lg overflow-hidden">
      <h3 class="text-lg font-semibold text-gray-800">设备可靠性趋势分析</h3>
      <!-- 顶部标签导航栏 -->
    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
    <el-tab-pane label="MTBF" name="MTBF"></el-tab-pane>
    <el-tab-pane label="MTTR" name="MTTR"></el-tab-pane>
    <el-tab-pane label="总利用率" name="totalUtilizationRate"></el-tab-pane>
    <el-tab-pane label="DownTime" name="DownTime"></el-tab-pane>
    <el-tab-pane label="OEE" name="tableOEE"></el-tab-pane>
    <el-tab-pane label="维修单分布" name="maintenanceData"></el-tab-pane>
    <el-tab-pane label="上周设备故障分布图" name="maintenanceLastweek"></el-tab-pane>
    <!-- maintenanceLastweek -->
    </el-tabs>
    <!-- 内容区域 -->
    <div class="tab-content">
      <!-- 使用动态组件渲染当前选中的标签内容 -->
      <component :is="currentComponent" :key="activeTab"></component>
    </div>
    </el-card>
  </div>
</template>

<script>
// 导入所需的视图组件
import tableMTBF from './tableComponents/tableMTBF.vue'
import tableMTTR from './tableComponents/tableMTTR.vue'
import totalUtilizationRate from './tableComponents/totalUtilizationRate.vue'
import DownTime from './tableComponents/tableDownTime.vue'
import tableOEE from './tableComponents/tableOEE.vue'
import maintenanceData from './tableComponents/maintenanceData.vue'
import maintenanceLastweek from './tableComponents/maintenanceLastweek.vue'
// maintenanceLastweek

export default {
  name: 'equipmentWeeklyReport',
  data() {
    return {
     activeTab: 'MTBF',
     // 标签名称与组件的映射关系
      tabComponentMap: {
        MTBF: tableMTBF,
        MTTR: tableMTTR,
        totalUtilizationRate: totalUtilizationRate,
        DownTime: DownTime,
        tableOEE: tableOEE,
        maintenanceData: maintenanceData,
        maintenanceLastweek: maintenanceLastweek
      }
    }
  },
  computed: {
    // 根据当前激活的标签获取对应的组件
    currentComponent() {
      return this.tabComponentMap[this.activeTab] || tableMTBF
    }
  },
  methods: {
    // 标签点击事件处理函数
    handleTabClick(tab) {
      this.activeTab = tab.name;
      // console.log(`切换到标签: ${tab.label} (${tab.name})`);
      }
    }
}
</script>

<style scoped>
.tab-router-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tab-content {
  flex: 1;
  padding: 15px;
  /* background-color: #f5f7fa; */
  background-color: #FFFF;
  /* border: 1px solid #ebeef5;
  border-top: none;
  border-radius: 0 0 4px 4px; */
  overflow: auto;
}
</style> 